import React, {useEffect,} from 'react'
import {connect,} from "react-redux"
// components
import GoBackLayout from "../../../layouts/GoBackLayout/GoBackLayout"
import GrayBorderRoundAvatar from "../../../shared-components/GrayBorderRoundAvatar/GrayBorderRoundAvatar";
import SettingIcon from '../../../res/images/web/my/通用设置备份 2@2x.png'
import CustomButton from "../../../shared-components/CustomButton/CustomBotton"
import TabWithCustomUnderline from "../../../layouts/TabWithCustomUnderline/TabWithCustomUnderline"
// antd-mobile
import {Icon, WhiteSpace, WingBlank} from "antd-mobile"
// stylesheet
import './StartLiveMain.css'
// icons
import BigBlingIcon from '../../../res/images/web/Tabs/big-bling-icon.png'
import StartLiveBtnMonster from "../../../res/images/web/start-live/start-live-monster-icon.png"
import TopOneFansIcon from "../../../res/images/web/shared/fans-top-1.png"
import TopTwoFansIcon from "../../../res/images/web/shared/fans-top-2.png"
import TopThreeFansIcon from "../../../res/images/web/shared/fans-top-3.png"
import {liveCategory,} from "../../../utils/mockdata"

const StartLiveMain = props => {

    const avatarUrl = 'https://c-ssl.duitang.com/uploads/item/201806/01/20180601231203_ckqzw.thumb.700_0.jpg'
    const cs = [...liveCategory.ent, ...liveCategory.sport,]

    // localStorage
    const uid = localStorage.getItem('userid')
    const userid = localStorage.getItem('userid')

    // props
    const {
        history,
        isLogin,
        userDetail,
        fetchUserDetail,
        doOpenLive,
        roomName,
        catalog,
        emitError,
    } = props

    const {
        Nickname,
    } = userDetail
    const c = cs[catalog]

    // fetch user detail data
    useEffect(() => {
        if (isLogin) {
            fetchUserDetail({uid: userid,})
        }
    }, [])

    // functions
    const openLive = () => {
        const roomname = roomName
        // if (roomname.length > 0)
        if (roomname.length <= 0) {
            emitError('直播房间名称不能为空')
            return
        }
        if (c === undefined) {
            emitError('直播分类不能为空')
            return
        }
        doOpenLive({uid, roomname, catalog,})
    }

    const settingIcon = <img
        src={SettingIcon}
        alt=''
        onClick={() => history.push('./start-live/setting')}
    />

    const tabs = [{title: '周榜',}, {title: '总榜',},]

    const indexToIconMapper = {
        0: TopOneFansIcon,
        1: TopTwoFansIcon,
        2: TopThreeFansIcon,
    }

    const topFansListTemplate = [].slice(0, 3).map((fan, index) => {
        if (index === 0) {
            return (
                <div key={index} className={`mg-t-1 start-live-fans start-live-fans-${index}`}>
                    <GrayBorderRoundAvatar
                        avatarUrl={fan.iconUrl}
                        size='mid'
                    />
                    <p>{fan.name}</p>
                    <img src={indexToIconMapper[index]} alt='' />
                </div>
            )
        }
        return (
            <div key={index} className={`mg-t-1 start-live-fans start-live-fans-${index}`}>
                <GrayBorderRoundAvatar
                    avatarUrl={fan.iconUrl}
                    size='s'
                />
                <p>{fan.name}</p>
                <img src={indexToIconMapper[index]} alt='' />
            </div>
        )
    })

    const StartLiveContainerTemplate = (
        <div className='fixed-full-container'>
            <GoBackLayout
                title='进入直播'
                history={history}
                rightContent={settingIcon}
            >
                <div className='fix-full-container-minus-nav-bar flex-space-between flex-column'>
                    <div className='start-live-upper-ctn flex-space-around flex-column'>
                        <WingBlank>
                            <div className='flex-start-align-center'>
                                <div className='start-live-header-avatar'>
                                    <GrayBorderRoundAvatar
                                        size='lg'
                                        avatarUrl={avatarUrl}
                                    />
                                </div>
                                <div className='start-live-header-info flex-space-around flex-column'>
                                    <p>{Nickname}</p>
                                    {/*<span>房间ID: 123456</span>*/}
                                    <div>
                                        <span>321</span><span>粉丝</span>
                                    </div>
                                </div>
                            </div>
                        </WingBlank>

                        <WingBlank>
                            <CustomButton
                                bg='#F8F8F8'
                                onClick={(e) => history.push('start-live/setting/room-name')}
                            >
                                <div className='flex-space-between start-live-btn'>
                                    <span>房间名称</span>
                                    <div className='flex-space-between-align-center'>
                                        <span>{roomName}</span>
                                        <Icon type='right' color='#333333'/>
                                    </div>
                                </div>
                            </CustomButton>
                            <WhiteSpace/>
                            <CustomButton
                                bg='#F8F8F8'
                                onClick={(e) => history.push('start-live/setting/category')}
                            >
                                <div className='flex-space-between start-live-btn'>
                                    <span>直播分类</span>
                                    <div className='flex-space-between-align-center'>
                                        <span>{c ? c.title : ''}</span>
                                        <Icon type='right' color='#333333'/>
                                    </div>
                                </div>
                            </CustomButton>
                        </WingBlank>

                        <WingBlank>
                            <div className='start-live-btn-play'>
                                <CustomButton
                                    shadow='0px 4px 10px 0px rgba(250,114,104,0.4)'
                                    onClick={() => openLive()}
                                >开启直播</CustomButton>
                                <img src={BigBlingIcon} alt='' className='start-live-btn-play-bling'/>
                                <img src={StartLiveBtnMonster} alt='' className='start-live-btn-play-monster'/>
                            </div>
                        </WingBlank>
                    </div>

                    <div
                        className='start-live-middle-ctn'
                    >
                        <p>贡献榜</p>
                        <span
                            onClick={() => history.push('./start-live/devote-rank')}
                        >查看全部</span>
                    </div>

                    <div className='start-live-lower-ctn'>
                        <TabWithCustomUnderline
                            tabs={tabs}
                            prefixCls='start-live-lower'
                        >
                            <div className='flex-space-around flex-align-end'>
                                {topFansListTemplate}
                            </div>
                        </TabWithCustomUnderline>
                    </div>
                </div>

            </GoBackLayout>
        </div>
    )

    return StartLiveContainerTemplate
}

const mapStateToProps = state => ({
    isLogin: state.global.isLogin,
    userDetail: state.user.userdetail,
    roomName: state.star.roomname,
    catalog: state.star.catalog,
    isShowing: state.star.isShowing,
})

const mapDispatchToProps = (dispatch) => ({
    emitError: (payload) => dispatch.global.globalError(payload),
    fetchUserDetail: (id) => dispatch.user.fetchUserDetail(id),
    doOpenLive: (payload) => dispatch.star.doOpenLive(payload),
})


export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(StartLiveMain)
